{extends file="../home.html"}
{block name="title"}{$head_title}{/block}

{block name="css"}
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/front/front_css/refresh_load.css?version={$version}"/>
<link href="__PUBLIC__/Css/front/css/common_channel.css?version={$version}" type="text/css" rel="stylesheet">
{if $channel_type == 'praise'}
<link href="__PUBLIC__/Css/front/css/zanshang_home.css?version={$version}" type="text/css" rel="stylesheet">
{elseif $channel_type == 'reward'}
<link href="__PUBLIC__/Css/front/css/zanshang_home.css?version={$version}" type="text/css" rel="stylesheet">
{elseif $channel_type == 'crowdfunding'}
<link href="__PUBLIC__/Css/front/css/zhonchou_home.css?version={$version}" type="text/css" rel="stylesheet">
{else}

{/if}
<style type="text/css">
body{
	background: #F3F3F3;
}
</style>
{/block}
{block name="content"}

	
<div class="com_header">
	<a href="javascript:;" class="go_back"><i class="icon_back"></i></a>{$head_title}<a href="/FrontIndex/message_center" class="msg native_go"><i class="icon_msg"></i>{if $is_read}<span class="dot"></span>{/if}</a>
</div>


<div id="load_wrapper">
	<div id="scroller">
			<div id="pullDown">
			    <span class="pullDownIcon"></span>
			</div>

			<div class="channel_header clearfix">
				<img src="{$channel.icon}" alt="" class="header_img native_go" data-url="/FrontChannel/channel_info/channel_id/{$channel.channel_id}">
				<div class="header_main">
					<h1 class="title"><a href="/FrontChannel/channel_info/channel_id/{$channel.channel_id}" class="native_go">{$channel.channel_name}</a><span class="today">今日新帖{$new_post_num}</span></h1>
					<p class="level"><span class="rank">{$rank_name}</span>{$channel.channel_name}</p>
					<div class="line">
						<p class="line-inner" data-width="{$exp_rate}"></p>
					</div>
	
					
					<!-- 关注 -->
					<div class="btn_gz" {if $is_follow}style="display:none;"{/if}><span></span>关注</div>

					<!-- 已关注 -->
					<div class="gz_yes" {if $is_follow}style="display:block;"{else}style="display:none;"{/if}>已关注</div>

					<!-- 签到 -->
					<div class="qiandao" {if $is_follow && !$is_sign}style="display: block;"{else}style="display: none;"{/if}>
						<i class="icon_qd"></i>签到
					</div>
					<!-- 已签到 -->
					<div class="qd_yes" {if $is_follow && $is_sign}style="display: block;"{else}style="display: none;"{/if}>已签到</div>
				</div>
			</div>


			<!-- 通用列表 -->
			<div class="home_list" id='new_list'>
				{foreach from=$post_list item=v}
				<div class="home_item">
					<div class="user_info clearfix">
						<a href="/FrontUserCenter/others_space/user_id/{$v.user_id}" class="avatar native_go">
							<img data-src="{$v.post_user.headimgurl}?imageView2/1/w/200/h/200/imageslim" alt="photo" src="/Public/Images/img/no-img.png">
						</a>
						<div class="user_cont">
							<a class="nickname native_go" href="/FrontUserCenter/others_space/user_id/{$v.user_id}">{$v.post_user.nickname}</a>
							{foreach from=$v.post_user_title item=title}
							<i class="tag" style="background-color: {$title.title_color}">{$title.title_name}</i>
							{/foreach}
						</div>
					</div>
					{if $v.is_featured == 1}
						<a href="/FrontChannel/post_detail/post_id/{$v.post_id}" class="native_go">
						<div class="item_title">
						{$v.title}
						</div>
						<div class="item_desc" style="-webkit-line-clamp: 1;">
						{$v.content}
						</div>
						<!--大图start-->
						<ul class="item_imgbox clearfix">
						{foreach from=$v.imgs item=img key=k}
							{if $k == 0}
								<div style="width: 100%;">
									<img data-src="{$img.img}?imageView2/1/w/200/h/200/imageslim" alt="" src="/Public/Images/img/no-img.png">
								</div>
							{else}
							<!--大图end-->
							<li style="height: 114px;">
								{if $k < 3}
								<img data-src="{$img.img}?imageView2/1/w/200/h/200/imageslim" alt="" src="/Public/Images/img/no-img.png">
								{else}
								<div class="mask" style="margin-left: 5px">
									<div class="txt" >包含共{$v.img_count}张图</div>
								</div>
								<img style="margin-left: 5px" data-src="{$img.img}?imageView2/1/w/200/h/200/imageslim" alt="" src="/Public/Images/img/no-img.png">
								{break}
								{/if}
							</li>
							{/if}
						{/foreach}
						</ul>
					{else}
					<!-- 点击文字和图片跳转到详情页 -->
					<a href="/FrontChannel/post_detail/post_id/{$v.post_id}" class="native_go">
						<div class="item_title">
							{$v.title}
						</div>
						<div class="item_desc">
							{$v.content}
						</div>
						<ul class="item_imgbox clearfix">
							{foreach from=$v.imgs item=img key=k}
							{if $k < 5}
							<li {if !$img.is_show}class="blur"{/if}>
							<img data-src="{$img.img}?imageView2/1/w/200/h/200/imageslim" alt="" src="/Public/Images/img/no-img.png">
							</li>
							{else}
							<li {if !$img.is_show}class="blur"{/if}>
							<div class="mask">
								<div class="txt">包含共{$v.img_count}张图</div>
							</div>
							<img data-src="{$img.img}?imageView2/1/w/200/h/200/imageslim" alt="" src="/Public/Images/img/no-img.png">
							</li>
							{/if}
							{/foreach}
						</ul>
					{/if}
						{if $channel_type == 'normal'}
						<div class="item_bot clearfix">
							<span class="time fl">{$v.addtime}</span>
							<span class="channel fl">{$channel.channel_name}</span>
							<span class="fr pl">评论&nbsp;{$v.comment_num}</span>
							<span class="fr see">查看&nbsp;{$v.clickdot}</span>
						</div>
						{elseif $channel_type == 'praise'}
						<div class="item_bot clearfix">
							<span class="time fl">{$v.addtime}</span>
							<span class="fl see">查看&nbsp;{$v.clickdot}</span>
							<span class="fl pl">评论&nbsp;{$v.comment_num}</span>
							<span class="price fr">赞赏价：¥{$v.praise_price}</span>
							<span class="fen fr">{$v.avg_score}分</span>
						</div>
						{elseif $channel_type == 'reward'}
						<div class="item_bot clearfix">
							<span class="time fl">{$v.addtime}</span>
							<span class="fl see">查看&nbsp;{$v.clickdot}</span>
							<span class="fl pl">评论&nbsp;{$v.comment_num}</span>
							<span class="price fr">悬赏价：¥{$v.reward_money}</span>
						</div>
						{elseif $channel_type == 'crowdfunding'}
						<div class="item_bot clearfix">
							<span class="time fl">{$v.addtime}</span>
							<span class="price fr">心愿价：¥{$v.goal_money}</span>
							<span class="wan fr">已完成{$v.cf_rate}%</span>
						</div>
						{/if}
					</a>
				</div>
				{/foreach}

			</div>

			<div id="pullUp">
				<!-- <span class="pullUpIcon"></span> --><span class="pullUpLabel">上拉加载...</span>
			</div>
		</div>
	</div>


	<!-- 发布 -->
	<a href="/FrontChannel/post_{$channel_type}/channel_id/{$channel.channel_id}" class="native_go"><div class="post"></div></a>

	
{/block}
{block name="js"}
<script type="text/javascript" src="__PUBLIC__/Js/front/js/lazy-load-img.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/iscroll.js"></script>

{if $channel_type == 'normal'}
<script type="text/javascript" src="__PUBLIC__/Js/front/js/normal_post_load.js"></script>
{elseif $channel_type == 'praise'}
<script type="text/javascript" src="__PUBLIC__/Js/front/js/praise_post_load.js"></script>
{elseif $channel_type == 'reward'}
<script type="text/javascript" src="__PUBLIC__/Js/front/js/reward_post_load.js"></script>
{elseif $channel_type == 'crowdfunding'}
<script type="text/javascript" src="__PUBLIC__/Js/front/js/cf_post_load.js"></script>
{/if}


	
<script>
	var total = parseInt('{$total}');
    var firstRow = parseInt('{$firstRow}');
    var channel_id = '{$channel.channel_id}'
    var channel_name = '{$channel.channel_name}'
    var signing = false;
    var following = false;
    var $is_sign = '{$is_sign}';
    // var is_sign = {if $is_sign}true{else}false{/if};
    var is_sign = {if $is_sign}true{else}false{/if};

{literal}	
	$(function(){
		var imgw = $('.item_imgbox li').width()
		imgh = $('.item_imgbox li').height(imgw);

		// 百分比
		$('.line-inner').width($('.line-inner').attr("data-width")+"%");

		var lazyLoadImg = new LazyLoadImg({
	        el: document.querySelector('#load_wrapper'),
	        mode: 'default', //默认模式，将显示原图，diy模式，将自定义剪切，默认剪切居中部分
	        time: 250, // 设置一个检测时间间隔
	        complete: true, //页面内所有数据图片加载完成后，是否自己销毁程序，true默认销毁，false不销毁
	        position: { // 只要其中一个位置符合条件，都会触发加载机制
	          top: 0, // 元素距离顶部
	          right: 0, // 元素距离右边
	          bottom: 0, // 元素距离下面
	          left: 0 // 元素距离左边
	        },
	        before: function () { // 图片加载之前执行方法
	          
	        },
	        success: function (el) { // 图片加载成功执行方法
	          // el.classList.add('success')
	        },
	        error: function (el) { // 图片加载失败执行方法
	          // el.src = './images/error.png'
	        }
	    })
	    //
		if(!is_ios()){
			$('.home_list .tag').css('padding-top','1px');
		}
	})
		
	

    $(function(){
    	$('.btn_gz').click(function(){
			// $(this).hide();
			// $('.gz_yes').show();
			// $('.qiandao').show();
			if(following){
				return;
			}
			following = true;
			follow(1);
		})
	    
	    $('.qiandao').on('click',function(){
	    	if(signing){
	    		return;
	    	}
	    	signing = true;
	    	$.ajax({
	    		url:'/FrontChannel/sign',
	    		type:'post',
	    		data:{channel_id:channel_id},
	    		success:function(r){
	    			if(r.code == 1){
	    				$('#tan').html(r.msg);
	    				tishi();
	    			}else{
	    				is_sign = true;
	    				var imgw = $('.item_imgbox li').width()
						imgh = $('.item_imgbox li').height(imgw);
						// 百分比
						$('.line-inner').width(r.exp_rate+"%")
						$('.rank').html(r.rank);

	    				$('.qiandao').hide();
				    	toast('已签到成功', 'succ');
						$('.qd_yes').show();
						native_listen('follow_channel');// 签到因为刷新页面相同 所以用同一事件
	    			}
	    			signing = false;
	    		}
	    	})

	    	
	    })  
    });
    // 取消关注
    $('.gz_yes').on('click',function(){
		// $(this).hide();
		// $('.qd_yes').hide();
		// $('.qiandao').hide();
		// $('.btn_gz').show();
		if(following){
			return;
		}
		following = true;
		follow(2);
    })


    function follow(type){
    	//1关注，2取关
    	$.ajax({
    		url:'/Front/follow_channel',
    		type:'post',
    		data:{channel_id:channel_id},
    		success:function(r){
    			if(type == 1){
    				if(r.code == 1){
    					$('#tan').html(r.msg);
    				}else{
    					$('.btn_gz').hide();
						$('.gz_yes').show();
						if(is_sign){
							$('.qd_yes').show();
						}else{
							$('.qiandao').show();
						}
						$('.rank').html(r.rank);
						native_listen('follow_channel');
    				}
    				following = false;
    			}else if(type == 2){
    				if(r.code == 1){
    					$('#tan').html(r.msg);
    				}else{
    					$('.gz_yes').hide();
				    	$('.qd_yes').hide();
						$('.qiandao').hide();
				    	$('.btn_gz').show();
						native_listen('follow_channel');
    				}
    				following = false;
    			}
    		}
    	})
    }

    

{/literal} 
</script>

{/block}